<script lang="tsx">
import router from '@/router'

export default {
  name: 'NavLeft',
  setup () {
    const to = (path: string) => {
      router.push(path)
    }
    return () => <div class={'nav-left'}>
      <div class={'nav-title'}>导航栏</div>
      <div>
        {router.options.routes.map(item => item.meta.isNav
          ? <div onClick={() => to(item.path)} class={'nav-item'}>
            {item.meta.title}
          </div>
          : null
        )}
        {/* {router.options.routes.map(item => <router-link to={item.path}>{item.name}</router-link>)} */

        }
      </div>
    </div>
  }
}
</script>
<style langs=scss scoped>
.nav-left {
  width: 120px;
  height: 100%;
  overflow: auto;
  background-color: #409EFF;

}
.nav-title {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  background-color: #409EFF;
}
.custom-menu {
  background-color: #409EFF;
}
.nav-item {
  height: 50px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
}
.nav-item:hover {
  background-color: #52a3dd;
}
</style>
